﻿@{
    ViewBag.Title = "Xuất kho";
}
<div class="row" style="border-bottom: 1px solid #d4d4d4; padding-bottom: 10px">
    <div class="col-sm-6">
        <div class="input-group">
            @Html.TextBox("SearchMaSP", null, new { @class = "form-control", @placeholder = "Mã sản phẩm" })
            <span class="input-group-btn">
                <button id="popupSanPham" class="btn btn-default" type="button" onclick="showattach(this.id)">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </button>
            </span>
            @Html.TextBox("SearchTenSP", null, new { @disabled = "disabled", @class = "form-control", @placeholder = "Tên sản phẩm" })
        </div>
    </div>

    <div class="col-sm-2">
        @Html.TextBox("dtFrom", ViewBag.crFr as string, new { @class = "form-control", @placeholder = "Từ ngày" })
    </div>
    <div class="col-sm-2">
        @Html.TextBox("dtTo", ViewBag.crTo as string, new { @class = "form-control", @placeholder = "Đến ngày" })
    </div>

    <div class="col-sm-1">
        <button id="btnSearch" type="button" name="btnCTT" class="btn btn-primary">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>Tìm kiếm
        </button>

    </div>

    <div class="col-sm-1">
        <button id="btnThongKe" type="button" class="btn btn-primary" name="btnTK" onclick="exportExcel();">
            <span class="glyphicon glyphicon-blackboard" aria-hidden="true"></span>Thống kê
        </button>

    </div>
</div>
@*<div class="col-sm-1">
    <input id="btnThongKe" value="Thống kê" type="button" style="padding: 10px 25px; font-size: 14pt" name="btnTK" onclick="exportExcel();" />
</div>*@

<div class="row" style="padding: 10px 0">
    <div class="col-sm-12">
        <a href="@Url.Action("Create", "XuatKho")" class="btn btn-primary" style="color:white">
            <span class="glyphicon glyphicon-plus"></span>Thêm mới hóa đơn
        </a>
    </div>
</div>


<table id="jqgData" class="table"></table>
<div id="jqgpData"></div>
<div id="pageDetails" style="display: none" title="Chi tiết hóa đơn"></div>
<div id="dialog-SanPham" style="display: none" title="Sản phẩm">
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#dtFrom").datepicker();
        $("#dtTo").datepicker();
        loadGrid();
        $("#gs_Action").css("display", "none");
        $("#gs_DiaChiKH").css("display", "none");
        $("#gs_NgayXuatKho").css("display", "none");
        $("#gs_TongThanhToan").css("display", "none");
    });

    //show dialog san pham
    function showattach() {
        $("#dialog-SanPham").dialog({
            width: 1000,
            height: 600,
            modal: true,
            open: function () {
                $(this).load("/SanPhamInKho/IndexSPXK");
            },
        });
    }

    function SelectSP(sp) {
        var selectedValue = sp;
        $.ajax({
            url: '@Url.Action("GetProductXKById", "SanPham")',
            type: 'POST',
            data: { "selectedValue": selectedValue },
            dataType: 'json',
            success: function (response) {
                var productDetails = response.ProductDetail;
                var productdetail = productDetails.split(';#');
                $("#SearchMaSP").val(productdetail[0]);
                $("#SearchTenSP").val(productdetail[3]);

            }
        });
        $("#dialog-SanPham").dialog("close");
    }


    $('#btnSearch').click(function (event) {
        $("#jqgData").jqGrid('setGridParam', { postData: { from: $("#dtFrom").val(), to: $("#dtTo").val(), masp: $("#SearchMaSP").val(), btn: 'Search' } });
        $('#jqgData').setGridParam({ datatype: "json" }).trigger('reloadGrid');
    });


    function loadGrid() {
        $('#jqgData').setGridParam({ datatype: "json" }).trigger('reloadGrid');
        $("#jqgData").jqGrid({
            url: '@Url.Action("IndexGridGet", "XuatKho")',

            datatype: 'json',
            mtype: 'GET',
            colNames: ['ID', 'Mã hóa đơn', 'Khách hàng', 'Địa chỉ', 'NV giao dịch', 'Ngày xuất kho', 'Tổng Thanh Toán', 'Action'],
            colModel: [
                { name: 'ID', index: 'ID', align: 'left', hidden: true },
                { name: 'MaHoaDon', index: 'MaHoaDon', align: 'left', width: '100px' },
                { name: 'MaKH', index: 'MaKH', align: 'left', width: '150px' },
                { name: 'DiaChiKH', index: 'DiaChiKH', align: 'left', width: '300px' },
                { name: 'DisplayName', index: 'DisplayName', align: 'left', width: '150px' },
                {
                    name: 'NgayXuatKho', index: 'NgayXuatKho', width: '90px', align: 'left', editable: false, formatter: 'date', search: true,
                    formatoptions: {
                        srcformat: 'd/m/Y H:i:s',
                        newformat: 'd/m/Y'
                    },
                    align: 'right',
                    sorttype: "date",
                    searchoptions: {
                        sopt: ['eq', 'ne'],
                        dataInit: function (elem) {
                            $(elem).datepicker({
                                dateFormat: 'dd/mm/yy',
                                onSelect: function (dateText, inst) {
                                    setTimeout(function () {
                                        $('#jqgData')[0].triggerToolbar();
                                    }, 100);
                                }
                            });
                        }
                    }
                },
                { name: 'TongThanhToan', index: 'TongThanhToan', align: 'right', width: '110px' },
                { name: 'Action', index: 'ID', align: 'center', width: '135px', formatter: ActionFormat },
            ],
            pager: '#jqgpData',
            jsonReader: { repeatitems: false },
            sortname: 'MaHoaDon',
            viewrecords: true,
            sortorder: 'desc',
            height: 'auto',
            autoencode: true,
            rowNum: 20,
            rowList: [5, 10, 20],

        });
        $("#jqgData").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn", enableClear: false, ignoreCase: true });
    }
    function ActionFormat(cellvalue, options, rowObject) {
        var rowid = rowObject["ID"];
        return "<input style='height:22px;' type='button' value='Chi tiết' onclick='ChiTietHoaDon(" + rowid + ")'  /><input style='height:22px;' type='button' value='Sửa' onclick=\"window.location.href='/XuatKho/edit/" + rowid + "'\"  /> <input style='height:22px;' type='button' value='In' onclick=\"window.location.href='/XuatKho/Details/" + rowid + "'\"  /> <input style='height:22px;' type='button' value='Xóa' onclick=\"if(confirm('Bạn có muốn xóa hóa đơn ?')) window.location.href='/XuatKho/Delete/" + rowid + "'\"  /> ";

    }
    function ChiTietHoaDon(rowid) {
        var url = "/XuatKho/DetailsXuatKho/" + rowid;
        $("#pageDetails").show();
        $("#pageDetails").load(url);
    }

    function exportExcel() {
        var sidx;
        var sord;
        var filter;
        var search;
        var filters = jQuery("#jqgData").getGridParam("postData");
        if (filters["sidx"] == 'ID') {
            sidx = "ID";
            sord = "desc";
        } else {
            sidx = filters["sidx"];
            sord = filters["sord"];
            filter = filters["filters"];
            search = filters["_search"];
        }

        var from = $("#dtFrom").val();
        var to = $("#dtTo").val();
        var masp = $("#SearchMaSP").val();


        $.fileDownload('@Url.Action("Export", "XuatKho")' + '?sidx=' + sidx + '&sord=' + sord + '&from=' + from + '&to=' + to + '&masp=' + masp + '&filter=' + filter + '&search=' + search, {
            preparingMessageHtml: "Preparing download.",
            failMessageHtml: "Export failed."
        });
    }
</script>

